<template>
	<div class="header">
		<div class="header-left">
			<div class="iconfont back-icon">&#xe64e;</div>
		</div>
		<div class="header-input">
			<span class="iconfont">&#xe634;</span>
			输入城市景点
		</div>
		<router-link to='/city'><!-- router-link跳转到相应的组件上 -->
			<div class="header-right">
				{{this.city}}
				<span class="iconfont">&#xe634;</span>
			</div>
		</router-link>
	</div>
</template>
<script>
import { mapState } from 'vuex'
export default{
	name:'HomeHeader',
  computed: {
    ...mapState(['city']),
  }
}
</script>
<!-- scoped使样式只对当前组件有效 -->	
<!-- html{font-size: 50px;} -->
<!-- flex:1 让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容 -->
<style lang="stylus" scoped>
/*定义一个$bgColor全局样式变量,在variables.styl中可以修改*/
/*__STYLES__是在webpack.base.conf.js中定义的一个路径全局变量*/
 @import '~__STYLES__/varibles.styl'
 .header
    display: flex
    line-height: .86rem
    background:$bgColor
    color: #fff
    .header-left
      width: .64rem
      float: left
      .back-icon
        text-align: center
        font-size: .4rem
    .header-input
      flex: 1
      height: .64rem
      line-height: .64rem
      margin-top: .12rem
      margin-left: .2rem
      padding-left: .2rem
      background: #fff
      border-radius: .1rem
      color: #ccc
    .header-right
      min-width: 1.04rem
      padding: 0 .1rem
      float: right
      text-align: center
      color: #fff
      .arrow-icon
        margin-left: -.04rem
        font-size: .24rem
</style>